<template>
  <a-card bordered>
    <a-row style="margin-bottom: 2%;">
      <a-col span="24">
        <span style="font-size: 16px;margin-right: 10px;"> 当前模式:</span>
        <a-space size="large">
          <a-radio-group v-model="configData" button-style="solid" @change="choseChange">
            <a-radio-button value="0">
              阿里物流查询
            </a-radio-button>
            <a-radio-button value="1">
              腾讯物流查询
            </a-radio-button>
          </a-radio-group>
        </a-space>
      </a-col>
    </a-row>
    <a-row>
      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.ali"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" style="font-size: 20px;"
                      :spin="spin.ali"
                      @mouseover="mouseOver(0)"
                      @mouseleave="mouseLeave(0)"
                      @click="goToAlibabaModal(false)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" style="font-size: 20px;" @click="goToAlibabaModal(true)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                文档
              </template>
              <a-icon key="book" type="book" @click="jump(docUrl.aliLogistics)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="将通过阿里的API查询物流轨迹">
            <template slot="title">
              阿里物流
              <a-tag color="green" v-if="configData==0">
                运行
              </a-tag>
              <a-tag color="red" v-else>
                停止
              </a-tag>
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.ali"
            />
          </a-card-meta>
        </a-card>

      </a-col>
      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.tx"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" style="font-size: 20px;"
                      :spin="spin.tx"
                      @mouseover="mouseOver(1)"
                      @mouseleave="mouseLeave(1)"
                      @click="goToTencentModal(false)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" style="font-size: 20px;" @click="goToTencentModal(true)"/>
            </a-tooltip>
          </template>
          <a-card-meta description="将通过腾讯的API查询物流轨迹">
            <template slot="title">
              腾讯物流
              <a-tag color="green" v-if="configData==1">
                运行
              </a-tag>
              <a-tag color="red" v-else>
                停止
              </a-tag>
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.tx"
            />
          </a-card-meta>
        </a-card>

      </a-col>
    </a-row>
    <ali-logistics-modal ref="aliRef"></ali-logistics-modal>
    <tx-logistics-modal ref="txRef"></tx-logistics-modal>
  </a-card>
</template>
<script>
import {getAction, putAction} from "@/api/manage";
import {BoneCommonMixin} from "@/mixins/BoneCommonMixin";
import aliLogistics from "../img/aliLogistic.jpg"
import tencentLogistics from "../img/tencentLogistics.jpg"
import {ConfigDictMixins} from "@views/gospel/configCenter/mixins/ConfigDictMixins";
import AliLogisticsModal from "@views/gospel/configCenter/logistics/modules/AliLogisticsModal";
import TxLogisticsModal from "@views/gospel/configCenter/logistics/modules/TxLogisticsModal";
import {aliLogisticsDoc} from "@views/gospel/configCenter/mixins/ConfigDoc";

export default {
  name: "LogisticsConfig",
  mixins: [BoneCommonMixin, ConfigDictMixins],
  components: {AliLogisticsModal, TxLogisticsModal},
  data() {
    return {
      description: "物流配置中心",
      imgUrl: {
        ali: aliLogistics,
        tx: tencentLogistics
      },
      type: "logisticsType",
      routerUrl: "/config/center/logistics/LogisticsConfig",
      url: {
        switchType: "/config/logistics/switchLogistics",
      },
      docUrl: {
        aliLogistics: aliLogisticsDoc,
      },
      spin: {
        ali: false,
        tx: false,
      }
    }
  },
  created() {
    this.queryDict();
  },
  methods: {
    goToAlibabaModal(value) {
      this.$refs.aliRef.visible = true;
      this.$refs.aliRef.disable = value;
      this.$refs.aliRef.queryJsonDict();
    },
    goToTencentModal(value) {
      this.$refs.txRef.visible = true;
      this.$refs.txRef.disable = value;
      this.$refs.txRef.queryJsonDict();
    },
    mouseOver: function (value) {
      switch (value) {
        case 0:
          this.spin.ali = true;
          break;
        case 1:
          this.spin.tx = true;
          break;
      }
    },
    mouseLeave: function (value) {
      switch (value) {
        case 0:
          this.spin.ali = false;
          break;
        case 1:
          this.spin.tx = false;
          break;
      }
    },
  }
}
</script>

<style scoped>

</style>